import React, { useEffect, useState } from 'react'
import {  Row, Col, Skeleton, Empty, Image } from 'antd'
import { useRouter } from 'next/router'
import Header from '@/components/header/header'
import categoriesListModel from 'pages/model/categories-manage'
import { storage } from '@/utils/utils'
import articlesModel from 'pages/model/articles'
import ListItem from '@/components/list-item/list-item'
import noData from '@/public/images/no-data.svg'
import styles from '@/styles/Home.module.scss'

function Categories () {
  const router = useRouter()
  const { word } = router.query
  const [dataLoding, setDataLoding] = useState(true)
  const [listData, setListData] = useState([])
  const [tagDetail, setTagDetail] = useState()
  const { id } = router.query
  useEffect(() => {
    if (JSON.parse(storage.get('next_blog_userInfo'))?.id && id) {
      setDataLoding(true)
      articlesModel.getArticlePageList({
        data: {categories: Number(id), loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id}
      }).then(({datas}) => {
        if (datas && datas.list) {
          setListData(datas.list)
          setDataLoding(false)
        }
      })
    }
  }, [id])

  useEffect(() => {
    if (JSON.parse(storage.get('next_blog_userInfo'))?.id && id) {
      setDataLoding(true)
      categoriesListModel.getTagsDetail({
        data: {id}
      }).then(({datas}) => {
        if (datas) {
          setTagDetail(datas)
          setDataLoding(false)
        }
      })
    }
  }, [id])
  return (
    <div className={styles.container}>
      <Header searchWord={word} />
      <div className={styles.categories} id="categories">
        <div>
          { tagDetail && <h1>{tagDetail.name}</h1>}
          <p>{listData.length} 文章</p>
        </div>
      </div>
      {
        tagDetail && <div style={{width: 1000, margin: '0px auto', padding: 20, display: 'flex', alignItems: 'center'}} className="categories-img">
          <Image src={tagDetail.imgUrl} preview={false} width={48} alt=""></Image>
          <p style={{fontSize: 18, marginLeft: 25, color: '#666'}}>{tagDetail.introduce}</p>
        </div>
      }
      
      <Row justify="center" className="content-row row" style={{background: '#fff', width: 1000, margin: '0px auto', paddingBottom: 25}} >
        <Col xs={24} sm={24} md={20} lg={20}>
          {
            dataLoding ?
              <div className={styles.skeleton}>
                <Skeleton active className={styles.skeleton_content}  />
                <Skeleton.Image  className={styles.skeleton_img} />
              </div>
              : 
              <>
                {listData.length && listData.length > 0 ?
                  <div  style={{marginTop: 25}}>
                    {listData.map((item, index) => <ListItem key={index} searchWord={word} data={item} />)}
                  </div>
                  :
                  <Empty
                    // 这是个坑 noData是一个对象 {src, height, width}
                    image={noData.src}
                    imageStyle={{
                      height: 100,
                    }}
                    style={{marginTop: 25}}
                    description={
                      <span style={{color: '#808795'}}>暂无数据</span>
                    }
                  >
                  </Empty>
                }
              </>
          }
        </Col>
      </Row>
    </div>
  )
}

export default  Categories